import React, { useEffect, useState } from 'react';
import { withRouter } from 'react-router-dom'
import {getHomeBanner} from  '@/api/server' 

import 'swiper/css/swiper.css'
import Swiper from 'swiper'
function Banner(props) {
    const [bannerList, setBannerList] = useState([])
    useEffect(() => {
        getHomeBanner().then((res) => {
            console.log(res)
            setBannerList(res.result)
            initBanner()
            
        })
    }, [])




    const initBanner = () => {
        new Swiper('.swiper-container', {
            loop: true, // 循环模式选项
            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
            },

            // 如果需要前进后退按钮
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },

            // 如果需要滚动条
            scrollbar: {
                el: '.swiper-scrollbar',
            },
        })
        console.log('=========init===========')
    }
    return (
        <div className="swiper-container">
            <div className="swiper-wrapper">
                {
                    bannerList.map((item, index) => {
                        return (
                            <div key={index} className="swiper-slide">
                                <img src={item.slideImg} alt="" />
                            </div>
                        )
                    })
                }
            </div>
            <div className="swiper-pagination"></div>

            <div className="swiper-button-prev"></div>
            <div className="swiper-button-next"></div>

            <div className="swiper-scrollbar"></div>
        </div>
    )
}
export default withRouter (Banner)